<template>
	<view class="send-coupon-box">
		<yk-header :title="title" @headBtn="headBtn()" @closePage="closePage()"></yk-header>
		<view class="send-amount-box">
			<view class="amount-msg-box">
				<view>可用额度</view>
				<view>{{availableCredit}}</view>
			</view>
		</view>
		<!-- <picker mode="" :range="" @change="">
			<view>picker组件</view>
		</picker> -->
		<picker class="picker-change-box" :range="array" @change="bindDateChange">
			<view class="change-box">
				<view>发券额度</view>
				<view>{{array[index]}}</view>
				<image src="../../static/img/zhanye/jinru-hui.png" mode=""></image>
			</view>
		</picker>
		<view class="submit" @click="sendCoupon($event)">确认发券</view>
	</view>
</template>

<script>
	export default {
		onLoad(event) {
			console.log(event);
			this.customerId = event.customerId;
			this.moblie = event.moblie;
		},
		onShow() {
			uni.showLoading({
				title: '加载中'
			});
			this.getTotal();
			// this.getCompany();
		},
		data() {
			return {
				array: [50, 100, 200, 300, 400, 500],
				index: 0,
				availableCredit: 0,
				customerId: 0,
				moblie: '',
				showLoading: 0,
				title: '发券'
			};
		},
		onReachBottom: function() {},
		onPullDownRefresh: function() {},
		methods: {
			//顶部功能键
			headBtn(e) {
				let that = this;
				uni.showActionSheet({
					itemList: ['刷新', '清除缓存'],
					success: function(res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						if (res.tapIndex == 0) {
							//刷新
							that.getTotal();
							// that.getCompany();
						} else {
							//清楚缓存
							// callNative('onClearH5Cache')
							uni.showToast({
								title: '清除缓存成功'
							});
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			//关闭当前页面
			closePage() {
				callNative('navigateBack')
			},
			bindDateChange: function(e) {
				this.index = e.target.value;
				console.log(this.index);
			},
			getTotal() {
				try {
					uni.request({
						url: this.$usereq + '/coupon-expand/customer/quotatotal/find/quota',
						method: 'GET',
						header: {
							'blade-auth': decodeURI(uni.getStorageSync('token')),
							'content-type': 'application/json'
						},
						data: {},
						success: res => {
							let datas = res.data;
							console.log(datas);
							if (datas.code == 200) {
								this.availableCredit = datas.data != '' && datas.data != null ? datas.data : 0;
							} else {
								uni.showToast({
									title: datas.msg,
									icon: 'none',
									duration: 2000
								});
							}
							uni.stopPullDownRefresh();
						},
						complete() {
							uni.hideLoading();
						}
					});
				} catch (e) {
					console.log(e.message);
				}
			},
			async sendCoupon() {
				try {
					if (this.availableCredit < this.array[this.index]) {
						uni.showToast({
							icon: 'none',
							title: '您的额度不足，暂无法发券',
							duration: 2000
						});
						return
					}
					let obj = {
						"amount": 0,
						"customerId": 0,
						"moblie": "",
					}
					obj.amount = this.array[this.index];
					obj.customerId = this.customerId;
					obj.moblie = this.moblie;
					console.log(obj);
					// uni.showLoading({
					// 	title: '发券中'
					// });
					// return
					// let res = await this.$request.post('/coupon-customer/customer/quotatotal/send', { data: obj });
					uni.request({
						url: this.$usereq + '/coupon-expand/customer/quotatotal/send',
						method: 'POST',
						header: {
							'blade-auth': decodeURI(uni.getStorageSync('token')),
							'content-type': 'application/json'
						},
						data: obj,
						success: res => {
							let datas = res.data;
							console.log(datas);
							if (datas.code == 200) {
								uni.showToast({
									title: '发券成功',
									icon: 'success',
									duration: 2000
								});
								setTimeout(function() {
									h5NavigateBack({
										delta: 1
									});
								}, 2000)
							} else {
								uni.showToast({
									icon: 'none',
									title: datas.msg,
									duration: 2000
								});
							}
						},
						complete() {
							// uni.hideLoading();
						}
					});
				} catch (e) {
					uni.hideLoading();
					console.log(e.message);
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #f3f3f3 !important;
	}

	.send-coupon-box {
		width: 100%;
		height: 100%;
		min-height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		min-width: 750px;
		background: #f3f3f3;
		font-size: 36px;
	}

	.send-amount-box {
		padding: 20px;
		box-sizing: border-box;
		background: #fff;
		height: 280rpx;

		.amount-msg-box {
			background: linear-gradient(90deg, rgba(78, 182, 255, 1), rgba(0, 150, 255, 1));
			border-radius: 10px;
			height: 240rpx;
			color: #fff;
			font-size: 50px;
			box-sizing: border-box;
			padding: 30px;

			view:nth-child(1) {
				line-height: 80px;
				font-size: 30px;
			}
		}
	}

	.picker-change-box {
		width: 750px;
		height: 120px;
		padding: 0 20px;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 1);
		border-top: 1px solid #F4F4F4;
		display: flex;

		.change-box {
			width: 100%;
			min-width: 710px;
			height: 120px;
			display: flex;
			flex-direction: row;
			font-size: 36px;
			justify-content: space-between;
			align-items: center;
		}

		view:nth-child(2) {
			padding-right: 73px;
			font-size: 36px;
		}

		image {
			width: 18px;
			height: 33px;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
		}
	}

	.submit {
		width: 334px;
		height: 94px;
		font-size: 36px;
		line-height: 94px;
		background: rgba(0, 150, 255, 1);
		border-radius: 10px;
		margin: 0 auto;
		margin-top: 130px;
		color: #fff;
		text-align: center;
	}
</style>
